/**
 * 列表 & key
 * 如果列表项目的顺序可能会变化，不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题
 * 在 map() 方法中的元素需要设置 key 属性
 * 生成两个不同的数组时，可以使用相同的 key 值
 */
import React from 'react';

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  )
}


class ListAndKeys extends React.Component {
  render() {
    const numbers = [1, 2, 3, 4, 5];
    return <NumberList numbers={numbers} />
  }
}
export default ListAndKeys;